<template>
  <!-- 默认编辑器 -->
  <div class="editor-container">
    <toolbar :editor="editorRef" :default-config="toolbarConfig" mode="simple" style="border-bottom: 1px solid #ccc" />
    <editor :default-config="editorConfig" :model-value="props.modelValue" style="height: 300px" @on-change="handleChange" @on-created="handleCreated" />
  </div>
  <selector-material v-if="imageVisible" :title="'选择图片'" :material-type="4" :multiple="true" :visible="imageVisible" @close="handleImageCallback" />
</template>

<script setup>
  import '@wangeditor/editor/dist/css/style.css'
  import { onUnmounted, ref, shallowRef } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import { Menus } from './index.js'
  import { registerMenu } from '@/components/Editor/module/module.js'
  import SelectorMaterial from '@/components/Selector/Material/index.vue'

  const props = defineProps({
    modelValue: {
      type: String,
      default: ''
    }
  })

  /**
   * [
   *     "bold",
   *     "underline",
   *     "italic",
   *     "through",
   *     "code",
   *     "sub",
   *     "sup",
   *     "clearStyle",
   *     "color",
   *     "bgColor",
   *     "fontSize",
   *     "fontFamily",
   *     "indent",
   *     "delIndent",
   *     "justifyLeft",
   *     "justifyRight",
   *     "justifyCenter",
   *     "justifyJustify",
   *     "lineHeight",
   *     "insertImage",
   *     "deleteImage",
   *     "editImage",
   *     "viewImageLink",
   *     "imageWidth30",
   *     "imageWidth50",
   *     "imageWidth100",
   *     "divider",
   *     "emotion",
   *     "insertLink",
   *     "editLink",
   *     "unLink",
   *     "viewLink",
   *     "codeBlock",
   *     "blockquote",
   *     "headerSelect",
   *     "header1",
   *     "header2",
   *     "header3",
   *     "header4",
   *     "header5",
   *     "todo",
   *     "redo",
   *     "undo",
   *     "fullScreen",
   *     "enter",
   *     "bulletedList",
   *     "numberedList",
   *     "insertTable",
   *     "deleteTable",
   *     "insertTableRow",
   *     "deleteTableRow",
   *     "insertTableCol",
   *     "deleteTableCol",
   *     "tableHeader",
   *     "tableFullWidth",
   *     "insertVideo",
   *     "uploadVideo",
   *     "editVideoSize",
   *     "uploadImage",
   *     "codeSelectLang",
   *     "ImageMenu"
   * ]
   */
  const toolbarConfig = ref({
    toolbarKeys: [
      'fullScreen',
      'fontSize',
      '|',
      'bold',
      'italic',
      'underline',
      'through',
      'color',
      'bgColor',
      '|',
      'justifyLeft',
      'justifyRight',
      'justifyCenter',
      'justifyJustify',
      '|',
      'redo',
      'undo',
      'clearStyle',
      '|'
    ]
  })

  const editorConfig = ref({})

  // 编辑器实例
  const editorRef = shallowRef()
  const handleCreated = (editor) => {
    editorRef.value = editor

    // 打印菜单
    console.log(editor.getAllMenuKeys())
    // 注册自定义菜单
    registerMenu(editorRef.value, toolbarConfig.value, Menus)
    // 注册自定义菜单点击事件
    initMenuEvent(editor)
  }

  const imageVisible = ref(false)
  const videoVisible = ref(false)
  const audioVisible = ref(false)
  const initMenuEvent = (editor) => {
    editor.on('ImageMenuClick', () => {
      imageVisible.value = true
    })
    editor.on('VideoMenuClick', () => {
      videoVisible.value = true
    })
    editor.on('AudioMenuClick', () => {
      audioVisible.value = true
    })
  }
  const handleImageCallback = (val) => {
    imageVisible.value = false
    if (val) {
      const editor = editorRef.value
      val.forEach((item) => {
        editor.insertNode({ type: 'image', src: item.materialUrl, alt: item.materialName, children: [{ text: '' }] })
      })
    }
  }

  // 编辑器回调函数
  const emit = defineEmits(['update:modelValue'])
  const handleChange = (editor) => {
    emit('update:modelValue', editor.getHtml())
  }

  onUnmounted(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })
</script>
